.pub_chat {
    .page_box {
        padding: 20rpx 0 40rpx 0;

        .banner_div {
            width: calc(100vw - 56rpx);
            border-radius: 10rpx;
            margin: 0 auto 30rpx auto;

            .swiper {
                width: calc(100vw - 56rpx);
                height: 180rpx;
                border-radius: 10rpx;
                overflow: hidden;
            }

            .swiper_item {
                width: calc(100vw - 56rpx);
                height: 180rpx;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 10rpx;
            }

            ::v-deep uni-swiper .uni-swiper-dot {
                background-color: #fff;
                opacity: 0.6;
            }

            ::v-deep uni-swiper .uni-swiper-dot-active {
                background-color: #fff;
                opacity: 1;
            }
        }

        .lis_div {
            width: 100%;
            margin: 0 auto;

            .li {
                width: 100%;
                padding: 0 30rpx 0 30rpx;

                .cont {
                    padding: 0 0 0 140rpx;
                    position: relative;

                    .img {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        position: absolute;
                        left: 0;
                        top: 22rpx;
                    }

                    .text {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        padding: 28rpx 0;
                        border-bottom: 2rpx solid rgba($color: #000000, $alpha:0.03);

                        .title {
                            width: 70%;
                            line-height: 40rpx;
                            height: 40rpx;
                            color: #333333;
                            font-size: 28rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-weight: bold;
                            display: flex;
                            align-items: center;

                            .span_1 {
                                height: 40rpx;
                                width: 40rpx;
                                background: url("@/static/aimg/img_24.png") top center no-repeat;
                                background-size: 38rpx;
                                margin: 0 10rpx 0 0;
                            }

                            .span_2 {
                                height: 40rpx;
                                line-height: 40rpx;
                                color: #000000;
                                font-size: 28rpx;
                                font-weight: bold;
                                max-width: 90%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .span_2_red {
                                color: red;
                                max-width: 60%;
                            }

                            .span_3 {
                                width: 60rpx;
                                height: 28rpx;
                                line-height: 28rpx;
                                color: #CF943C;
                                font-size: 16rpx;
                                font-weight: bold;
                                border-radius: 14rpx;
                                text-align: center;
                                margin-left: 10rpx;
                                background-image: linear-gradient(to right, #FFE8C1, #FFDE76);
                            }
                        }

                        .time {
                            width: 30%;
                            text-align: right;
                            line-height: 40rpx;
                            height: 40rpx;
                            color: #999999;
                            font-size: 20rpx;
                        }

                        .msg {
                            width: calc(100% - 60rpx);
                            height: 30rpx;
                            line-height: 30rpx;
                            color: #AFAFAF;
                            font-size: 24rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin: 14rpx 30rpx 0 0;
                        }

                        .num {
                            min-width: 30rpx;
                            height: 30rpx;
                            line-height: 30rpx;
                            color: #FFFFFF;
                            font-size: 16rpx;
                            text-align: center;
                            background-color: #FF6060;
                            border-radius: 50%;
                            margin-top: 14rpx;
                        }

                        .num_no {
                            background-color: #bbb;
                        }
                    }
                }


            }

            .li_pinned {
                background-color: #f1f1f1;
            }

            .del {
                height: 116rpx;
                width: 100rpx;
                margin-top: 40rpx;
                text-align: right;

                .icon {
                    width: 60rpx;
                    height: 46rpx;
                    // background-image: linear-gradient(#FF62A9, #FF2123);
                    font-size: 46rpx;
                    color: #FF62A9;
                    margin: 35rpx auto;
                    display: block;
                }
            }

        }
    }

    .user_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha:0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000000;

        .user_box {
            width: 85vw;
            height: 100vh;
            background-color: #fff;
            padding: calc(30rpx + var(--status-bar-height)) 0 0 28rpx;
            position: relative;
            left: 0;

            .icon_div {
                width: 100%;
                height: 40rpx;
                padding: 0 28rpx 0 0;

                .img_1 {
                    width: 40rpx;
                    height: 40rpx;
                    float: left;
                }

                .img_2 {
                    width: 40rpx;
                    height: 40rpx;
                    float: right;
                    margin: 0 40rpx 0 0;
                }

                .img_3 {
                    width: 40rpx;
                    height: 40rpx;
                    float: right;
                }

                .tbtns {
                    float: right;
                    height: 40rpx;
                    display: flex;

                    .tbtn {
                        color: #4E89FE;
                        line-height: 40rpx;
                        font-size: 24rpx;
                        margin: 0 0 0 40rpx;
                        font-weight: bold;
                    }

                    .tbtn:nth-child(1) {
                        color: #444;
                    }
                }
            }

            .tab_div {
                width: 100%;
                padding: 64rpx 28rpx 40rpx 0;
                display: flex;
                justify-content: space-around;

                .tab {
                    width: 45%;
                    height: 100rpx;
                    background-color: #F9F9F9;
                    border-radius: 24rpx;
                    line-height: 100rpx;
                    text-align: center;
                    color: #444444;
                    font-size: 32rpx;
                }

                .tab_active {
                    background-color: #4E89FE;
                    color: #fff;
                }
            }

            .tab_div_none {
                opacity: 0.4;
            }

            .lis_div {
                width: 100%;
                height: calc(100vh - var(--status-bar-height) - 300rpx);
                overflow-y: scroll;
                padding: 0 80rpx 0 0;

                .li_title {
                    line-height: 44rpx;
                    color: #333333;
                    font-size: 32rpx;
                    font-weight: bold;
                }

                .li {
                    margin: 45rpx 0;
                    width: 100%;
                    position: relative;
                    padding: 0 0 0 110rpx;
                    height: 80rpx;

                    .img {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .text {
                        width: 100%;
                        padding: 10rpx 0 10rpx 0;
                        display: flex;
                        align-items: center;

                        .span_1 {
                            height: 60rpx;
                            width: 60rpx;
                            background: url("@/static/aimg/img_24.png") top 10rpx center no-repeat;
                            background-size: 40rpx;
                            position: absolute;
                            left: 40rpx;
                            top: -20rpx;
                        }

                        .span_2 {
                            height: 60rpx;
                            line-height: 60rpx;
                            color: #444;
                            font-size: 32rpx;
                            max-width: 90%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .span_2_red {
                            color: red;
                            max-width: 60%;
                            font-weight: bold;
                        }

                        .span_3 {
                            width: 60rpx;
                            height: 32rpx;
                            line-height: 32rpx;
                            color: #CF943C;
                            font-size: 16rpx;
                            font-weight: bold;
                            border-radius: 14rpx;
                            text-align: center;
                            margin-left: 14rpx;
                            background-image: linear-gradient(to right, #FFE8C1, #FFDE76);
                        }
                    }
                }

                .li_group {
                    padding: 0 0 0 200rpx;

                    .img {
                        left: 60rpx;
                    }

                    .choose {
                        width: 40rpx;
                        height: 40rpx;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        margin-top: -20rpx;
                    }
                }
            }

            .letter_div {
                width: 40rpx;
                height: calc(100vh - var(--status-bar-height) - 400rpx);
                position: absolute;
                right: 28rpx;
                bottom: 100rpx;

                .li {
                    line-height: calc((100vh - var(--status-bar-height) - 400rpx) / 26);
                    text-align: center;
                    font-size: 24rpx;
                    color: #A9A9A9;
                }

                .li_active {
                    color: #53A1FF;
                }
            }
        }

        .user_box_mask {
            width: 15vw;
            height: 100vh;
            position: absolute;
            right: 0;
            top: 0;
        }

        ::v-deep .user_box_animation {
            animation: user_box_animation 0.6s;
        }

        @keyframes user_box_animation {
            from {
                left: -100vw;
            }

            to {
                left: 0;
            }
        }
    }

    .group_create_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha:0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000001;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        .alert_box {
            width: 90vw;
            margin: 0 5vw;
            background: url("@/static/aimg/img_32.png") center no-repeat;
            background-size: 100% 100%;
            margin-bottom: 40rpx;
            padding: 60rpx 70rpx 100rpx 70rpx;

            .logo {
                width: 180rpx;
                height: 180rpx;
                margin: 0 auto;
            }

            .title {
                color: #4E89FE;
                font-size: 30rpx;
                font-weight: bold;
                text-align: center;
                line-height: 50rpx;
                margin-bottom: 60rpx;
            }

            .msg {
                color: #B680FF;
                font-weight: bold;
                font-size: 24rpx;
                line-height: 40rpx;
                margin: 60rpx 0 40rpx 0;
            }
        }

        .close {
            color: #fff;
            font-size: 60rpx;
        }
    }
}

.pub_chat_info {
    background-color: #F9F9F9;

    .page_box {
        // padding: 20rpx 0 40rpx 0;
        background-color: #F9F9F9;

        .bottom_div {
            width: 100%;
            background-color: #fff;
            // position: fixed;
            // bottom: 0;
            // left: 0;
            min-height: 120rpx;

            .input_div {
                width: 100%;
                height: 120rpx;
                padding: 25rpx 28rpx;
                display: flex;

                .speech {
                    width: 58rpx;
                    height: 58rpx;
                    margin: 6rpx 30rpx 0 0;
                }

                .speech_btn {
                    flex: 1;
                    height: 70rpx;
                    border-radius: 35rpx;
                    background-color: #F7F8F9;
                    line-height: 70rpx;
                    text-align: center;
                    color: #333;
                    font-size: 24rpx;
                    overflow: hidden;
                }

                .input {
                    flex: 1;
                    height: 70rpx;
                    border-radius: 35rpx;
                    background-color: #F7F8F9;

                    input {
                        width: 100%;
                        height: 70rpx;
                        line-height: 40rpx;
                        padding: 15rpx 20rpx;
                        color: #333;
                        font-size: 24rpx;
                    }

                    .uni-input-placeholder {
                        color: #D6D6D6 !important;
                        font-size: 24rpx;
                    }
                }

                .more {
                    width: 56rpx;
                    height: 56rpx;
                    margin: 7rpx 0 0 30rpx;
                }

                .pub_btn {
                    width: 120rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    border-radius: 35rpx;
                    font-size: 28rpx;
                    margin: 0 0 0 40rpx;
                }
            }

            .tool_div {
                width: 100%;
                padding: 25rpx 28rpx 0 28rpx;
                display: flex;
                flex-wrap: wrap;

                .li {
                    width: 25%;
                    margin: 0 0 36rpx 0;

                    .img {
                        width: 62rpx;
                        height: 62rpx;
                        margin: 0 auto 24rpx auto;
                    }

                    .txt {
                        line-height: 24rpx;
                        padding: 0 20rpx;
                        font-size: 24rpx;
                        text-align: center;
                    }

                    .image {
                        max-width: 50vw;

                        .img_1 {
                            width: 100%;
                        }

                        .img_2 {
                            width: 30%;
                        }
                    }
                }
            }
        }

        .bottom_no_div {
            height: 120rpx;
            line-height: 120rpx;
            text-align: center;
            font-size: 24rpx;
            color: #ADADAD;
            background-color: #fff;
        }

        .chat_lis_div {
            width: 100%;
            height: 100%;

            // overflow-y: scroll;
            .group_notification {
                padding-bottom: 20rpx;

                .txt {
                    width: calc(100vw - 60rpx);
                    padding: 20rpx 20rpx 20rpx 80rpx;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    background: url("@/static/aimg/img_2.png") left 20rpx center no-repeat #fff;
                    background-size: 40rpx;
                    line-height: 40rpx;

                    .p {
                        line-height: 40rpx;
                        font-size: 26rpx;
                        color: #333;
                        max-width: 80%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                    }

                    .right {
                        color: #333;
                        font-size: 20rpx;
                        display: inline-block;
                    }
                }

            }

            .chat_li {
                margin-top: 40rpx;
                padding: 0 28rpx 0 28rpx;

                .time {
                    line-height: 28rpx;
                    text-align: center;
                    color: #A4A6AE;
                    font-size: 20rpx;
                    padding: 0 0 20rpx 0;
                    word-break: break-all;
                }

                .content_div {
                    width: 100%;
                    position: relative;
                    padding: 0 0 0 92rpx;

                    .headimg {
                        width: 72rpx;
                        height: 72rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .content {
                        width: 100%;

                        .name {
                            color: #333333;
                            font-size: 28rpx;
                            line-height: 28rpx;
                            margin-bottom: 20rpx;
                        }

                        .text {
                            background-color: #fff;
                            font-size: 28rpx;
                            color: #585A62;
                            line-height: 40rpx;
                            padding: 20rpx 28rpx 20rpx 20rpx;
                            border-top-right-radius: 12rpx;
                            border-bottom-right-radius: 12rpx;
                            border-bottom-left-radius: 12rpx;
                            width: auto;
                            display: inline-block;
                            max-width: 80%;
                            word-break: break-all;
                            white-space: pre-wrap;
                        }

                        .image {
                            width: 50vw;
                            display: inline-block;
                            vertical-align: top;

                            .img {
                                width: 100%;
                            }
                        }

                        .image_2 {
                            width: 30vw;
                        }


                        .video {
                            width: 50vw;
                            display: inline-block;
                            vertical-align: top;
                            position: relative;

                            video {
                                width: 100%;
                                height: 100%;
                            }

                            .img {
                                width: 100%;
                            }

                            .play {
                                width: 10vw;
                                height: 10vw;
                                font-size: 10vw;
                                position: absolute;
                                left: 20vw;
                                top: 50%;
                                margin-top: -5vw;
                                // color: #fff;
                                // background-color: #fff;
                                border-radius: 50%;
                                opacity: 0.5;
                            }
                        }

                        .sound {
                            width: 150rpx;
                            background-color: #fff;
                            font-size: 28rpx;
                            color: #585A62;
                            line-height: 40rpx;
                            height: 80rpx;
                            padding: 20rpx 28rpx 20rpx 80rpx;
                            border-top-right-radius: 12rpx;
                            border-bottom-right-radius: 12rpx;
                            border-bottom-left-radius: 12rpx;
                            display: inline-block;
                            position: relative;

                            .icon {
                                height: 40rpx;
                                width: 40rpx;
                                background: url("@/static/aimg/img_88.png") center no-repeat;
                                background-size: 40rpx;
                                position: absolute;
                                left: 20rpx;
                                top: 20rpx;
                            }

                            .icon_play {
                                background: url("@/static/aimg/img_90.png") center no-repeat;
                                background-size: 40rpx;
                            }
                        }
                    }
                }
            }

            .chat_li_me {
                .content_div {
                    padding: 0 92rpx 0 0;

                    .headimg {
                        position: absolute;
                        left: unset;
                        right: 0;
                    }

                    .content {
                        text-align: right;

                        .name {
                            text-align: right;
                        }

                        .text {
                            background-color: #3B67FF;
                            color: #FFFFFF;
                            border-top-right-radius: 0;
                            border-top-left-radius: 12rpx;
                            text-align: left;
                        }

                        .sound {
                            background-color: #3B67FF;
                            color: #FFFFFF;
                            padding: 20rpx 80rpx 20rpx 20rpx;
                            border-top-right-radius: 0;
                            border-top-left-radius: 12rpx;

                            .icon {
                                background: url("@/static/aimg/img_89.png") center no-repeat;
                                background-size: 40rpx;
                                transform: rotateY(180deg);
                                position: absolute;
                                left: unset;
                                right: 20rpx;
                                top: 20rpx;
                            }

                            .icon_play {
                                background: url("@/static/aimg/img_91.png") center no-repeat;
                                background-size: 40rpx;
                            }
                        }
                    }
                }
            }
        }
    }
}

.pub_chat_more {
    .page_box {
        padding: 0 0 100rpx 0;

        .lis_div {
            padding: 0 28rpx;

            .li {
                padding: 20rpx 0;
                display: flex;
                justify-content: space-between;

                .txt {
                    font-size: 28rpx;
                    line-height: 60rpx;
                    color: #444444;

                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                        display: inline-block;
                        vertical-align: top;
                        margin: 10rpx 32rpx 0 0;
                    }
                }

                .right {
                    height: 60rpx;

                    .icon-b-switch-1 {
                        font-size: 50rpx;
                        border-radius: 30rpx;
                        background-image: linear-gradient(to right, #87DDFE, #4E89FE);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        -webkit-animation: hue6sinfinitelinear;
                    }

                    .icon-b-switch-2 {
                        font-size: 50rpx;
                        color: #aaa;
                        border-radius: 30rpx;
                    }

                    .icon-b-arrow-1-2 {
                        font-size: 24rpx;
                        color: #AAAAAA;
                    }
                }
            }
        }

        .btn_div {

            padding: 100rpx 34rpx 40rpx 34rpx;
            width: 100%;

            .pub_btn {
                margin-bottom: 50rpx;
            }
        }

        .btn_div_1 {
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 0 34rpx 100rpx 34rpx;
        }

        .group_info {
            width: calc(100% - 56rpx);
            margin: 0 auto;
            background-color: #F8FCFF;
            border-radius: 14rpx;
            padding: 20rpx;
            display: flex;

            .text {
                flex: 1;
                padding: 6rpx 0 0 30rpx;

                .p_1 {
                    font-size: 28rpx;
                    line-height: 40rpx;
                    color: #444444;
                }

                .p_2 {
                    font-size: 24rpx;
                    line-height: 40rpx;
                    color: #999999;
                    margin-top: 10rpx;
                }

                .p_3 {
                    font-size: 32rpx;
                    line-height: 94rpx;
                    color: #444444;
                    font-weight: bold;
                    padding: 0 0 0 10rpx;
                }
            }

            .more {
                width: 30rpx;
                height: 100rpx;
                display: flex;
                align-items: center;

                .icon-font-basic {
                    font-size: 24rpx;
                    color: #AAAAAA;
                }
            }
        }

        .group_user_div {
            width: calc(100% - 56rpx);
            margin: 32rpx auto;
            background-color: #F8FCFF;
            border-radius: 14rpx;
            padding: 20rpx;

            .title {
                font-size: 28rpx;
                line-height: 40rpx;
                color: #333333;
                font-weight: bold;

                .more {
                    height: 40rpx;
                    width: 100rpx;
                    color: #B9B9B9;
                    font-weight: normal;
                    line-height: 36rpx;
                    font-size: 20rpx;
                    float: right;
                    border: 2rpx solid #979797;
                    text-align: center;
                    border-radius: 20rpx;

                    .icon-font-basic {
                        font-size: 16rpx;
                        color: #B9B9B9;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 0 0 4rpx;
                    }
                }
            }

            .lis {
                display: flex;
                flex-wrap: wrap;

                .li {
                    width: 20%;
                    margin-top: 28rpx;

                    .img {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                        margin: 0 auto 8rpx auto;
                    }

                    .name {
                        font-size: 24rpx;
                        line-height: 40rpx;
                        color: #333333;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding: 0 10rpx;
                    }
                }
            }
        }
    }
}

.pub_chat_group_member {
    .lis_div {
        width: 100%;
        height: 100%;
        padding: 30rpx 0 0 0;

        .li {
            margin: 0 auto 30rpx auto;
            width: calc(100% - 60rpx);
            position: relative;
            padding: 0 0 0 180rpx;
            height: 80rpx;


            .choose {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -20rpx;
            }

            .choose_disabled {
                opacity: 0.5;
            }

            .img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;
                position: absolute;
                left: 60rpx;
                top: 0;
            }

            .text {
                width: 100%;
                padding: 10rpx 0 10rpx 0;

                .name {
                    width: 100%;
                    line-height: 60rpx;
                    color: #444444;
                    font-size: 32rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 16rpx;
                }
            }

            .btn {
                width: 100rpx;
                height: 50rpx;
                position: absolute;
                right: 60rpx;
                top: 15rpx;
                background-image: linear-gradient(to right, #4E4FFE, #87DDFE);
                color: #fff;
                text-align: center;
                line-height: 50rpx;
                border-radius: 25rpx;
                font-size: 24rpx;
            }

            .btn_1 {
                background-image: linear-gradient(to left top, #FF3745, #FF69EA)
            }
        }

        .li-nochoose {
            padding: 0 0 0 120rpx;

            .img {
                left: 0;
            }
        }
    }

    .search_div {
        width: calc(100% - 60rpx);
        margin: 0 auto 40rpx auto;
        height: 80rpx;
        display: flex;
        background-color: #f8f8f8;
        border-radius: 10rpx;

        .input_box {
            width: calc(100% - 80rpx);
            height: 80rpx;
            border-radius: calc(80rpx / 2);

            .input {
                height: 80rpx;
                line-height: 80rpx;
                color: #333;
                font-size: 28rpx;
                padding: 0 0 0 40rpx;
            }
        }

        .btn {
            width: 80rpx;
            height: 80rpx;
            background: url("@/static/aimg/img_7.png") center no-repeat;
            background-size: 40rpx;
        }
    }
}

.pub_chat_add {
    .page_box {
        .user_list_box {
            padding: 30rpx;

            .li {
                position: relative;
                padding: 0 0 0 140rpx;

                .headimg {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .text {
                    .name {
                        line-height: 100rpx;
                        color: #333;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.chat_group_img {
    width: 100rpx;
    height: 100rpx;
    background-color: #F8FCFF;
    display: grid;
    border-radius: 10rpx;
    // margin: 20rpx;

    .img {
        border-radius: 8rpx;
        overflow: hidden;
    }
}

.chat_group_img_1 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);

    .img {
        border-radius: 10rpx;
        overflow: hidden;
    }
}


.chat_group_img_2 {
    grid-template-columns: repeat(2, calc(50% - 2rpx));
    grid-gap: 4rpx;
    padding: 4rpx;
    align-items: center;

    .img {
        width: 100%;
        height: calc(50% - 6rpx);
    }
}

.chat_group_img_3,
.chat_group_img_4 {
    grid-template-columns: repeat(2, calc(50% - 2rpx));
    grid-template-rows: repeat(2, calc(50% - 2rpx));
    grid-gap: 4rpx;
    padding: 4rpx;
    align-items: center;

    .img {
        width: 100%;
        height: 100%;
    }
}

.chat_group_img_5,
.chat_group_img_6,
.chat_group_img_7,
.chat_group_img_8,
.chat_group_img_9 {
    grid-template-columns: repeat(3, calc(100% / 3 - 3rpx));
    grid-template-rows: repeat(3, calc(100% / 3 - 3rpx));
    grid-gap: 4rpx;
    padding: 4rpx;

    .img {
        width: 100%;
        height: 100%;
    }
}

.pub_video_info {
    .video_info_box {
        width: 100vw;
        height: 100vh;
        position: relative;

        .video {
            width: 100vw;
            height: 100vh;
            display: block;
        }

        .back {
            width: 36rpx;
            height: 36rpx;
            position: fixed;
            left: 30rpx;
            top: calc(26rpx + var(--status-bar-height));
            z-index: 10;
        }

        .video_mask {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;

            .play {
                width: 120rpx;
                height: 120rpx;
                opacity: 0.4;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -60rpx 0 0 -60rpx;
            }
        }

    }

}